<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 因为这个页面我们要使用ajax登录 所以要改造一下表单 -->
    <form>
        <div>
            <label for="">用户名</label> <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="">密码</label> <input type="text" id="password" name="password">
        </div>
        <div>
            <input id="rememberMe" type="checkbox">记住用户名
        </div>
        <div>
            <button id="btn">提交</button>
        </div>
    </form>
    <script src="./QF.js"></script>
    <script>
        // 获取元素
        var username = document.getElementById("username");
        var btn = document.getElementById("btn");
        var rememberMe = document.getElementById("rememberMe");

        // 怎么知道用户上一个页面输入的什么内容呢？（cookie或者本地存储）
        // 从本地存储中取出用户名 
        var usernameText = localStorage.getItem("username");
        // 设置输入框的内容
        username.value = usernameText

        
        btn.onclick = function () {
            // document.cookie = "a=" + username.value + ";max-age=" + 60 * 60 * 24 * 365;
            // 获取用户名 
            var usernameText = username.value;
            // 判断checkbox是否被勾选
            if (rememberMe.checked) {
                // 记在本地存储里
                localStorage.setItem("username", usernameText);
            }
        }


        // 本地存储 localStorage 会话存储SessionStorage
        // HTML5中新增的一个新特性 用于永久的存储数据
        console.log(localStorage)

        // 1 存储数据  存储引用类型的时候 必须转为字符串 
        // localStorage.setItem("username", "hahaha")
        // localStorage.setItem("xiaoming", JSON.stringify({name:"xiaoming", age: 13}))

        // 2 获取数据
        // var xiaoming = JSON.parse(localStorage.getItem("xiaoming"))
        // console.log(xiaoming)

        // 3 删除数据
        // localStorage.removeItem("xiaoming")

        // 4 清空数据
        // localStorage.clear()


        // sessionStorage和localStorage操作起来是一样的 关键在于生命周期不同 sessionStorage关闭浏览器之后就没有了 但是刷新还在
        
    </script>
</body>

</html>